<template>
  <div class="container bg">
    <dv-full-screen-container>
      <!-- 第一部分 -->
      <div class="module-box">
        <div style="flex: 0 1 40%">
          <dv-decoration-8 style="width: 100%; height: 60px" />
        </div>
        <div style="flex: 0 1 30%">
          <dv-decoration-11
            style="{width: 100%; height: 60px;
              font-size: 26px;
              font-weight: bold;
              color: #ffffff;
              box-sizing: border-box;}"
            ><p>
              居民消费指数分析平台
            </p>
          </dv-decoration-11>
        </div>
        <div style="flex: 0 1 40%">
          <dv-decoration-8 :reverse="true" style="width: 100%; height: 60px" />
        </div>
      </div>
      <!-- 第二部分 -->
      <div class="module-box">
        <div style="flex:0 1 25%">
          <!-- 左一 -->
          <dv-border-box-8 style="width: 100%; height: 320px">
            <p>全国八大类CPI</p>
            <left-table-1></left-table-1>
          </dv-border-box-8>
          <!-- 左二 -->
          <dv-border-box-1 style="width: 100%; height: 320px">
            <p>2023年陕西省CPI</p>
            <left-table-2></left-table-2>
          </dv-border-box-1>
        </div>
        <!-- 中一 -->
        <div style="flex: 0 1 50%">
          <dv-border-box-11 style="width: 100%; height: 650px " title="全国CPI分布图">
            <middle-table></middle-table>
          </dv-border-box-11>
        </div>
        <div style="flex: 0 1 25%">
          <!-- 右一 -->
          <dv-border-box-8 :reverse="true" style="width: 100%; height: 340px">
            <p>近八个月全国CPI</p>
            <RightTable1></RightTable1>
          </dv-border-box-8>
          <!-- 右二 -->
          <div style="width: 100%; height: 320px;margin-top: 15px;">
            <p>各省八大类CPI及排名</p>
            <RightTable2></RightTable2>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import LeftTable1 from './LeftTable-1'
import LeftTable2 from './LeftTable-2'
import LeftTable3 from './LeftTable-3'
import MiddleTable from './MiddleTable'
import RightTable1 from './RightTable-1'
import RightTable2 from './RightTable-2'
export default {
  name: 'HelloWorld',
  components: {
    LeftTable1,
    LeftTable2,
    LeftTable3,
    RightTable1,
    RightTable2,
    MiddleTable,
    RightTable1
  }
}
</script>
<style scoped lang="scss">
p {
  font-size: 17px;
  font-weight: bold;
}
</style>
